<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <input type="button" value="加载user" onclick="loadUser()">
    <input type="button" value="加载user-async" onclick="loadUser2()">
    <br>
    <textarea  cols="30" rows="10"></textarea>
    <script>
        function loadUser(){
            let xhr=new XMLHttpRequest();
           /*  
            xhr.open(method,url,async);
            method:请求类型:GET、POST、PUT、DELETE等HTTP请求类型
            url：设置请求路径，类似于a标签的href或者form标签的action属性取值
            async：是否异步 */
            xhr.open("get","/user");
            // xhr.open("post","/user");
            // xhr.open("put","/user");
            // xhr.open("saasassaas","/user");//执行报错，400 (Bad Request),无效请求(请求配置或者参数存在问题)

            // xhr.open("get","/useraaa");//执行错误，404

            // xhr.open("get","/serviceError");//执行错误500 (Internal Server Error)服务器代码异常
                                            //5xx一般都是服务器错误，多数不需要前端处理(ajax请求代码是正确的)



            // 注意：监听方法在程序开发时候，应该定义发送请求的上面，才能保证请求发送时候一定由监控方法
            xhr.onload=function(){
                console.log(xhr.responseText);
            };
            xhr.send();
        }
        // AJAX最吸引人的就是它的“异步”特性,但是ajx也能够发送同步请求(不刷新页面的同步请求=>ajax的同步请求主要说的是js代码的同步)

        
        function loadUser2(){
            let xhr=new XMLHttpRequest();
          /*   
          xhr.open(method,url,async);
            method:请求类型:GET、POST、PUT、DELETE等HTTP请求类型
            url：设置请求路径，类似于a标签的href或者form标签的action属性取值
            async：是否异步 ,默认为true表示启用异步模式

                 当取值为true表示启用异步模式
                    =>页面不重新加载
                    =>js代码执行为异步模式，响应结果必须通过监控请求完成回调函数进行获取
                    =>异步ajax不会中断当前页面的其他操作
                当取值为false表示启用同步模式
                    =>页面不重新加载
                    =>js代码执行为同步模式，响应结果在send方法之后定义，js代码会等待请求完成
                    =>同步ajax会中断当前页面元素其他操作(假死状态)
            
            */
            xhr.open("get","/userAsync",true);
           
            console.log("===========>send前");
            xhr.send();
            console.log("==========>send后");

            console.log(xhr.responseText);
        }


       
    </script>
</body>
</html>